<template>
  <div class="page-container">
    <div class="page-header">
      <h1>公司简介</h1>
      <p class="subtitle">了解我们的历史、使命和价值观</p>
    </div>

    <div class="content-section">
      <div class="section-card">
        <div class="section-image about-image"></div>
        <div class="section-content">
          <h2>关于我们</h2>
          <p>员工管理系统是一家专注于企业人力资源管理解决方案的科技公司，成立于2018年。我们的团队由经验丰富的技术专家和人力资源管理专业人士组成，致力于为企业提供高效、智能的员工管理工具。</p>
          <p>六年来，我们已服务超过500家企业客户，覆盖金融、科技、制造、教育等多个行业，帮助他们简化人事流程，提高管理效率，优化员工体验。</p>
        </div>
      </div>

      <div class="section-card">
        <div class="section-content">
          <h2>我们的使命</h2>
          <p>我们的使命是通过创新科技赋能企业人力资源管理，帮助企业建立更高效、透明和人性化的员工管理体系，实现组织与员工的共同成长。</p>
          <div class="mission-values">
            <div class="value-item">
              <div class="value-icon">💡</div>
              <h3>创新</h3>
              <p>不断探索新技术和方法，为客户创造更大价值</p>
            </div>
            <div class="value-item">
              <div class="value-icon">🤝</div>
              <h3>协作</h3>
              <p>促进团队合作，共同解决复杂问题</p>
            </div>
            <div class="value-item">
              <div class="value-icon">🔍</div>
              <h3>透明</h3>
              <p>维持开放、诚实的沟通和工作方式</p>
            </div>
            <div class="value-item">
              <div class="value-icon">🚀</div>
              <h3>卓越</h3>
              <p>追求高质量的产品和服务标准</p>
            </div>
          </div>
        </div>
        <div class="section-image mission-image"></div>
      </div>

      <div class="section-card">
        <div class="section-image team-image"></div>
        <div class="section-content">
          <h2>管理团队</h2>
          <div class="team-members">
            <div class="team-member">
              <div class="member-avatar"></div>
              <h3>张伟</h3>
              <p class="member-title">创始人兼首席执行官</p>
              <p class="member-desc">前阿里巴巴技术总监，拥有15年企业软件开发经验</p>
            </div>
            <div class="team-member">
              <div class="member-avatar"></div>
              <h3>李娜</h3>
              <p class="member-title">产品副总裁</p>
              <p class="member-desc">人力资源管理专家，曾在世界500强企业担任HR总监</p>
            </div>
            <div class="team-member">
              <div class="member-avatar"></div>
              <h3>王强</h3>
              <p class="member-title">技术总监</p>
              <p class="member-desc">全栈开发专家，领导过多个大型企业系统的研发</p>
            </div>
            <div class="team-member">
              <div class="member-avatar"></div>
              <h3>刘芳</h3>
              <p class="member-title">客户成功总监</p>
              <p class="member-desc">专注于为客户提供卓越的实施和支持服务</p>
            </div>
          </div>
        </div>
      </div>

      <div class="section-card">
        <div class="section-content">
          <h2>我们的产品</h2>
          <p>我们提供全面的员工管理解决方案，涵盖从入职到离职的完整员工生命周期：</p>
          <div class="products-grid">
            <div class="product-item">
              <h3>员工信息管理</h3>
              <p>集中存储和管理员工基本信息、联系方式、合同和证件等</p>
            </div>
            <div class="product-item">
              <h3>绩效考核系统</h3>
              <p>设置目标、跟踪进度、评估表现和提供反馈</p>
            </div>
            <div class="product-item">
              <h3>培训管理平台</h3>
              <p>规划培训计划、记录培训历史和评估培训效果</p>
            </div>
            <div class="product-item">
              <h3>任务协作工具</h3>
              <p>分配任务、设置截止日期和跟踪完成情况</p>
            </div>
            <div class="product-item">
              <h3>企业公告系统</h3>
              <p>发布和管理企业内部公告和重要通知</p>
            </div>
            <div class="product-item">
              <h3>数据分析中心</h3>
              <p>生成各类报表和可视化图表，支持数据驱动决策</p>
            </div>
          </div>
        </div>
        <div class="section-image product-image"></div>
      </div>
      
      <div class="section-card client-section">
        <h2>我们的客户</h2>
        <p>我们很荣幸能与以下行业领先企业合作：</p>
        <div class="client-logos">
          <div class="client-logo"></div>
          <div class="client-logo"></div>
          <div class="client-logo"></div>
          <div class="client-logo"></div>
          <div class="client-logo"></div>
          <div class="client-logo"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.page-container {
  max-width: var(--app-max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-header h1 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 8px;
}

.subtitle {
  font-size: 16px;
  color: var(--app-secondary-text);
  margin-top: 0;
}

.content-section {
  display: grid;
  gap: 40px;
}

.section-card {
  display: flex;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--app-card-shadow);
}

.section-image {
  flex: 1;
  min-width: 40%;
  background-color: #f5f5f7;
}

.about-image, .mission-image, .team-image, .product-image {
  background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.section-content {
  flex: 1.5;
  padding: 32px;
}

.section-content h2 {
  font-size: 22px;
  margin-top: 0;
  margin-bottom: 16px;
  color: var(--el-color-primary);
}

.section-content p {
  margin: 0 0 16px 0;
  line-height: 1.6;
}

.mission-values {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 24px;
}

.value-item {
  text-align: center;
  padding: 16px;
  border-radius: 8px;
  background-color: rgba(0, 113, 227, 0.05);
  transition: transform 0.2s ease;
}

.value-item:hover {
  transform: translateY(-4px);
}

.value-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.value-item h3 {
  font-size: 16px;
  margin: 0 0 8px 0;
}

.value-item p {
  font-size: 14px;
  margin: 0;
}

.team-members {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.team-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.member-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #e6e6e6;
  margin-bottom: 12px;
}

.team-member h3 {
  font-size: 16px;
  margin: 0 0 4px 0;
}

.member-title {
  font-size: 14px;
  color: var(--el-color-primary);
  margin: 0 0 8px 0;
}

.member-desc {
  font-size: 13px;
  color: var(--app-secondary-text);
  margin: 0;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.product-item {
  padding: 16px;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.product-item h3 {
  font-size: 16px;
  margin: 0 0 8px 0;
}

.product-item p {
  font-size: 14px;
  margin: 0;
}

.client-section {
  flex-direction: column;
  padding: 32px;
  text-align: center;
}

.client-logos {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 24px;
}

.client-logo {
  width: 120px;
  height: 60px;
  background-color: #f5f5f7;
  border-radius: 8px;
  margin: 0 16px 16px 0;
}

@media (max-width: 968px) {
  .section-card {
    flex-direction: column;
  }
  
  .section-image {
    min-height: 200px;
  }
  
  .mission-values, .team-members, .products-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .page-container {
    padding: 0 16px;
  }
  
  .section-content {
    padding: 24px;
  }
}
</style> 